Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added new method hasValueChanged to check to see if a new value would… #16

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

mdgbayly
Copy link

… change the output value of the mask

This is a new method that will be used by react-maskedinput to determine if new props will change the mask value.

It is to fix an issue in react-maskedinput where the onChange handler passed to the input rejects a change. In our case preventing people from entering a percentage value > 100%

mask: '111%'

Type: 9
MaskValue: 9%

Type: 9
MaskValue: 99%

Type: 9
MaskValue: 999%

But the value of 999 is rejected by onChange handler so component re-renders with props of 99 again. But the mask does not re-render as componentWillReceiveNewProps checks to see if props have changed and in this case have not.

A related fix in react-maskedinput will use this new method rather than just checking props to determine if it should update the mask value.

@mdgbayly
Copy link
Author

Refer to insin/react-maskedinput#38 for related react-maskedinput PR

if (!nextValue) {
nextValue = ''
}
return this.value.join('') !== this.pattern.formatValue(nextValue.split('')).join('')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this doing a join? (Apologies if the question is a bit naive. I have access to this repo, but haven’t read any of the implementation)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few months since I looked at this, but I think it's because InputMask stores its internal representation of the field data as an array. Don't recall exactly why, but all related to how it processes the mask characters I believe.

@NickGard
Copy link
Contributor

Please add documentation for this new method to #inputmask-public-properties-getters--setters in the README. After that, LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants